<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="shortcut icon"  th:href="@{/favicon.ico}"/>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script type="text/javascript" src="/layui/jquery-3.5.1.min.js"></script>
    <script src="/layui/layui.js" charset="utf-8"></script>
    <script>
        var screenWidth = document.documentElement.clientWidth;
        layui.use('table', function(){
            var table = layui.table;
            table.render({
                id:'tableAll'
                ,elem: '#test'//绑定表格
                //数据来源
                ,url:'/management/getAllHotelApplications'//绑定三个按钮
                //,toolbar: '#toolbarDemo'//绑定三个按钮
                ,title: '酒店预订表'
                ,page: true
                ,width:screenWidth
                ,cellMinWidth:60
                ,defaultToolbar: ['filter', 'print', 'exports']//筛选，打印，导出（之后会删掉）
                ,where : {
                    state :''
                }
                ,cols: [
                    [
                        {field:'numbering', title:'编号',  fixed: 'left', unresize: true, sort: true, totalRowText: '合计'}
                        ,{field:'addTime', title:'申请日期',  edit: 'text', sort: true,templet:'<div>{{ layui.util.toDateString(d.addTime, "yyyy-MM-dd") }}</div>'}
                        ,{field:'staffName', title:'申请人',  sort: true,  templet:'<div>{{d.staff.name}}</div>'}
                        ,{field:'applicationType', title:'申请原因',  sort: true, templet:'<div>出差项目</div>'}
                        ,{field:'startTime', title:'入住时间', edit: 'text', templet:'<div>{{ layui.util.toDateString(d.startTime, "yyyy-MM-dd") }}</div>'}
                        ,{field:'endTime', title:'退房时间',  edit: 'text', templet:'<div>{{ layui.util.toDateString(d.endTime, "yyyy-MM-dd") }}</div>'}
                        ,{field:'peopleNumber', title:'随行人数'}
                        ,{field:'state', title:'状态', templet:'#statebar'}
                        ,{field:'location',minWidth:250, title:'期望位置'}
                        ,{fixed: 'right', title:'操作', toolbar: '#barDemo',minWidth:250}
                    ]
                ]
            });
            // 条件查询
            // $('#searchBtn').on('click', function() {
            //     table.reload('tableAll', {
            //         where : {
            //             supplierName : $('#demoReload').val(),
            //         },
            //         page : {
            //             curr : 1
            //         }
            //     });
            //     return false;
            // });
            $('#searchReject').on('click', function() {
                table.reload('tableAll', {
                    where : {state:0},
                    page : {curr : 1}
                });return false;});
            $('#searchCanApproval').on('click', function() {
                table.reload('tableAll', {
                    where : {state:1},
                    page : {curr : 1}
                });return false;});
            $('#searchCanDeal').on('click', function() {
                table.reload('tableAll', {
                    where : {state : 2},
                    page : {curr : 1}
                });return false;});
            $('#searchReam').on('click', function() {
            table.reload('tableAll', {
                where : {state : 3},
                page : {curr : 1}
            });return false;});
            $('#searchDone').on('click', function() {
                table.reload('tableAll', {
                    where : {state : 4},
                    page : {curr : 1}
                });return false;});
            $('#reset').on('click', function() {
                table.reload('tableAll', {
                    where : {state : null},
                    page : {curr : 1}
                });return false;});
            //工具栏事件 识别lay event
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：'+ data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选': '未全选')
                        break;
                    case 'goApplicationTemplate':
                        window.location = '/management/bookingHotelApplication';
                        break;

                };
            });
            //监听工具条 'tool(test)'要手动修改 tool是和  test是和table的lay-filter属性绑定
            table.on('tool(test)', function(obj){
                var data = obj.data;
                if(obj.event === 'edit'){
                    //layer.alert('编辑行：<br>'+ JSON.stringify(data))
                    parent.layer.open({
                        title:'酒店预订申请',
                        type:2,
                        content:'/management/getHotelApplicationDetails?id='+data.id,
                        area: ['1200px', '600px'],
                        btn:['驳回','通过'],
                        end:function(){window.location.reload()},
                        yes:function(index, layero){
                            if(data.state != 1){
                                parent.layer.closeAll();
                                parent.layer.msg("您已审批过");
                            }
                            else{
                                parent.layer.prompt({
                                    formType: 2,
                                    value: '',
                                    title: '请输入驳回原因',
                                    btn:['确定','返回'],
                                    area: ['600px', '250px'],
                                    zIndex: layer.zIndex,
                                    yes:function(index, layero) {
                                        var value = layero.find(".layui-layer-input").val();
                                        if (value == ""){
                                            parent.layer.msg("请输入驳回原因")
                                        } else {
                                            $.ajax({
                                                url:'/management/saveHotelApprovalForm',
                                                data:{"id":data.id,"value":value,"state":"0"},
                                            })
                                            parent.layer.closeAll();
                                            parent.layer.msg("驳回申请");
                                        }
                                    }
                                }, );
                            }
                        },
                        btn2:function(index, layero){
                            if(data.state!=1){
                                parent.layer.closeAll();
                                parent.layer.msg("您已审批过");
                            }
                            else{
                                $.ajax({
                                    url:'/management/saveHotelApprovalForm',
                                    data:{"id":data.id,"value":"通过","state":"2"},
                                })
                                layer.msg("通过申请");
                            }
                        },
                        shade: [0.3, '#393D49'],
                        shadeClose:false,
                        moveOut:true,
                    })
                }else if(obj.event === 'hotel'){
                    window.location.href="/management/hotel?applicationId="+data.id;
                }
                else if(obj.event === 'log'){
                    window.location.href="/management/hotelLedger?id="+data.id;
                }else if(obj.event==='administrativeReimbursementApplication'){
                    window.location.href= '/reimbursement/administrativeReimbursementApplication?dictionaryId=38&detailsId='+data.id+'&pastId=';
                }
            });
        });
    </script>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="goApplicationTemplate">新建酒店申请</button>
        </div>
    </script>
    <script type="text/html" id="barDemo" th:inline="javascript">
        <a class="layui-btn layui-btn-xs" lay-event="edit">查看详情</a>

        {{# if(d.state == 2){ }}
        <a class="layui-btn layui-btn-xs" lay-event="hotel">点我预定</a>
        {{# } }}
        {{# if(d.state == 3){ }}
        <a class="layui-btn layui-btn-xs" lay-event="log">查看台账</a>
        <a class="layui-btn layui-btn-xs" lay-event="administrativeReimbursementApplication">申请报销</a>
        {{# } }}
        {{# if(d.state == 4){ }}
        <a class="layui-btn layui-btn-xs" lay-event="log">查看台账</a>
        {{# } }}
    </script>
    <script type="text/html" id="statebar">
        {{#  if(d.state == 1 ){ }}
        <div>待审批</div>
        {{#  } }}
        {{#  if(d.state == 2 ){ }}
        <div>订票中</div>
        {{#  } }}
        {{#  if(d.state == 3 ){ }}
        <div>完成</div>
        {{#  } }}
        {{#  if(d.state == 4 ){ }}
        <div>已报销</div>
        {{#  } }}
        {{#  if(d.state == 0 ){ }}
        <div>已驳回</div>
        {{#  } }}
    </script>
    <script type="text/html" id="typebar">
        {{#  if(d.applicationType == 1 ){ }}
        <div>出差项目</div>
        {{#  } }}
        {{#  if(d.applicationType != 1 ){ }}
        <div>其他项目</div>
        {{#  } }}
    </script>
</head>
<body>
<form>
<!--        搜索客户：-->
<!--        <div class="layui-inline">-->
<!--            <input class="layui-input" name="id" id="demoReload" autocomplete="off">-->
<!--        </div>-->
<!--        <button class="layui-btn" id="searchBtn">搜索</button>-->
    <button class="layui-btn" id="searchReject">已驳回</button>
    <button class="layui-btn" id="searchCanApproval">待审批</button>
    <button class="layui-btn" id="searchCanDeal">待处理</button>
    <button class="layui-btn" id="searchReam">可报销</button>
    <button class="layui-btn" id="searchDone">已完成</button>

    <button class="layui-btn" type="reset" id="reset" >重置</button>
</form>
<table class="layui-hide" id="test" lay-filter="test"></table>
</body>
</html>